<template>
	<view>
		<view class="bg">
			<image src="../../../static/finishbg.png" mode=""></image>
		</view>
		<view>
			<text class="name">《春风细雨沐青峰》</text>
		</view>
		<view>
			<text class="size">白启哲 145*185cm</text>
		</view>
		<view class="price">
			<view>
				<text>¥20000</text>
			</view>
			<view>
				<text class="freight">运费：¥10.00 </text>
			</view>
		</view>
		
		<!-- 作者简介模块 -->
		<view class="introduce">
			<view>
				<image src="../../../static/person.jpg" mode="" class="people"></image>
			</view>
			<view>
				<image src="../../../static/right.png" mode="" class="icon"></image>
			</view>
		</view>
		<view class="about">
			<view>
				<text>国画大师白雪石长子</text>
			</view>
			<view>
				<text>“白派山水”嫡系传人</text>
			</view>
			<view>
				<text>中国美术家协会会员</text>
			</view>
			<view>
				<text>白启哲，1935年出生，北京市人，中国美术家协会会员，是当今中国山水画坛著名艺术家白雪石之子，也是最得白派真传和成就最大的“白派山水”嫡传画家。</text>
			</view>
		</view>
		
		<!-- 作品简介模块 -->
		<view class="worksdetail">
			<view class="goods">
				<text>作品详情</text>
			</view>
		</view>
		<view class="list">
			<view class="key">
				<text>作品名称</text>
			</view>
			<view class="value">
				<text>《春风细雨沐青峰》</text>
			</view>
		</view>
		<view class="list">
			<view class="key">
				<text>作品名称</text>
			</view>
			<view class="value">
				<text>《春风细雨沐青峰》</text>
			</view>
		</view>
		<view class="list">
			<view class="key">
				<text>作品类型</text>
			</view>
			<view class="value">
				<text>国画</text>
			</view>
		</view>
		<view class="list">
			<view class="key">
				<text>作品名称</text>
			</view>
			<view class="value">
				<text>《春风细雨沐青峰》</text>
			</view>
		</view>
		
		<!-- 作品图片模块 -->
		<view class="picture">
			<view>
				<image src="../../../static/finishbg.png" mode=""></image>
			</view>
			<view>
				<image src="../../../static/finishbg.png" mode=""></image>
			</view>
		</view>
		
		<view class="bottom">
			<view>
				<image src="../../../static/person.png" mode=""></image>
			</view>
			<view>
				<image src="../../../static/person.png" mode=""></image>
			</view>
		</view>
		
		<!-- 售后模块 -->
		<view class="after-sale">
			<view class="promise">
				<view class="title">
					<text>存放</text>
				</view>
				<view class="content">
					<text>放置画作的理想环境为室温14-18摄氏度，相对湿度50%-60%；避光、防潮请避免阳光长期直射画面，保持画作放置处的空气流通，并远离厨卫等湿气较重的地方，避免灰尘、油烟损害画作；防风请勿在空调口、暖气扇旁放置画作，避免风力过大造成画作受损；防损请勿过于频繁地搬动画作，并避免任何腐蚀性材料（如化学药剂、清洁剂等）接触画面，观赏画作时，请尽量避免肢体与画作的直接接触。此文本由后台上传。</text>
				</view>
			</view>
			
			<view class="promise">
				<view class="title">
					<text>清洁与保养</text>
				</view>
				<view class="content">
					<text>国画 请使用软质毛刷（如拂尘、羽毛掸子）清除灰尘，勿使用布类，并保证动作轻柔，避免损失画纸；若受潮，请用干布或纸巾吸水，再进行阴干，切忌暴晒。此文本由后台上传。</text>
				</view>
			</view>
			
			<view class="promise">
				<view class="title">
					<text>售后保障</text>
				</view>
				<view class="content">
					<text>1.  郑重承诺：品质保障，无忧售后
2. 真品保障：此作品为艺术家原创真品，有证书。
3. 独家合作：九大美院艺术家独家合作，作品全网唯一
4. 权威定价：业内权威专家、机构共同评测定价
5. 防伪追溯：鉴证备案体系，真假可查，全程可追溯
此文本为后台上传</text>
				</view>
			</view>
		</view>
		
		<!-- 底部模块 -->
		<view class="foot-bar">
		 <view>
		 	<image src="../../../static/客服@2x.png" mode=""></image>
			<view>
				<text>客服</text>
			</view>
		 </view>
		 
		 <view>
		 	<image src="../../../static/未收藏@2x.png" mode=""></image>
		 			<view>
		 				<text>收藏</text>
		 			</view>
		 </view>
		 
		 <view @click="goToCart">
		 	<image src="../../../static/购物车@2x.png" mode=""></image>
		 			<view>
		 				<text>购物车</text>
		 			</view>
		 </view>
		 
		<view class="btn">
			<view class="car">
				<text>加入购物车</text>
			</view>
			<view class="buy" @click="goToOrder">
				<text>立即购买</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			goToCart(){
				uni.navigateTo({
					url:'../cart/cart'
				})
			},
			goToOrder(){
				uni.navigateTo({
					url:'../order/order'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg image{
		width: 100%;
	}
	
  .name {
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 20rpx;
	}
	
  .size {
		font-size: 24rpx;
		font-weight: normal;
		color: #939393;
		margin-left: 40rpx;
	}
	
	.price {
		display: flex;
		justify-content: space-between;
		margin: 0 40rpx 0 40rpx;
	}
	
	.price text {
		font-size: 32rpx;
		font-weight: 700;
		color: #c71b19;
	}
	
	.price .freight {
		font-size: 24rpx;
		font-weight: normal;
		color: #939393;
	}
	
	.introduce {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 40rpx 0 40rpx;
	}
	
	.introduce .people{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	
	.introduce .icon{
		width: 40rpx;
		height: 40rpx;
		margin-top: 40rpx;
	}
	
	.about {
	  margin-left: 20rpx;
	}
	
	.about text {
		color: #939393;
		text-align: justify;
	}
	
	.worksdetail .goods {
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}
	
	.list {
		display: flex;
		justify-content: flex-start;
		margin-top: 10px;
	}
	
	.list .key {
		background-color: #f4f4f8;
		width: 180rpx;
		height: 60rpx;
		text-align: center;
		color: #959595;
	}
	.list .value {
		margin-left: 40rpx;
	}
	
	.picture image{
		width: 94%;
		margin-left: 3%;
	}
	
	.bottom {
		display: flex;
		justify-content: space-between;
		width: 90%;
	}
	
	.bottom image {
		width: 346rpx;
		height: 346rpx;
		margin-left: 20rpx;
	}
	
	.after-sale {
		width: 90%;
		margin: 5%;
	}
	
	.after-sale .title {
		text-align: center;
		font-weight: 700;
	}
	
	.after-sale .content {
		text-align: justify;
		font-weight: normal;
		color: #939393;
	}
	
	.after-sale .promise {
		margin-top: 40rpx;
	}
	
	.foot-bar {
		display: flex;
		justify-content: space-around;
	}
	
	.foot-bar image{
		width: 40rpx;
		height: 40rpx;
	}
	
	.foot-bar text {
		margin-left: -10rpx;
	}
	
	.btn {
		display: flex;
		justify-content: space-around;
		width: 480rpx;
		height: 90rpx;
		margin-top: 10rpx;
	}
	
	.btn .car {
		background-color: #d48c68;
		width: 240rpx;
		position: relative;
	}
	
  .car text {
	position: absolute;
	left: 50rpx;
	top: 20rpx;
	color: #ffffff;
  }
	
	.btn .buy {
		width: 240rpx;
		background-color: #c6100e;
		position: relative;
	}
	
	.buy text {
		position: absolute;
		left: 60rpx;
		top: 20rpx;
		color: #ffffff;
	}
</style>
